<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        form {
            margin: 0 auto;
            width: 200px;
            height: 200px;
            background-color: palevioletred;
            display: block;
            /* position: absolute; */
        }

        form:hover {
            cursor: crosshair;
        }

        #close {
            float: right;
        }
    </style>
</head>

<body>
    <button id="login">点击弹出登录框</button>

    <form action="#">
        <button id="close">关闭</button>
        <label for="name">用户名</label>

        <input type="text" id="name"><br>
        <label form="password">密码</label>
        <input type="password"><br>
        <button type="submit"> 登录</button>
    </form>

</body>
<script>
    let form = document.querySelector('form')
    document.querySelector('#login').addEventListener('click', function (e) {
        form.style.display = 'block'
        document.body.style.backgroundColor = 'gray'
    })
    document.querySelector('#close').addEventListener('click', () => {
        form.style.display = 'none'
        document.body.backgroundColor = '#ffffff'
    })
    /* 
    鼠标拖拽
        mousedown
        mousemove
        mouseup
    */
    let down = false
    let x, y;
    form.addEventListener('mousedown', (e) => {
        down = true
        // 鼠标相对盒子的位置
        // console.log(e.pageX,e.pageY)
        x = e.pageX - form.offsetLeft
        y = e.pageY - form.offsetTop
        // console.log(x,y)
    })
    form.addEventListener('mousemove', (e) => {
        if (down) {
            form.style.position='absolute';
            form.style.left=(e.pageX-x)+'px'
            form.style.top=(e.pageY-y)+'px'
        }
    })
    form.addEventListener('mouseup',(e)=>{
        down=false
    })
</script>

</html>